import React from 'react';
import { useState, useEffect } from 'react'
import type { FC } from 'react';
import request from '../../api/axios'
import { Image } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
const Medicine: FC = ({ }) => {
  const [medicineId, setMedicineId] = useState<number | string | undefined>(undefined);
  const [medicine, setMedicine] = useState<any[]>([]);
  const [rightData, setRightData] = useState<any[]>([]);
  const navigate = useNavigate();
  const getData = async () => {
    const data = await request.get("/api/health/share/knowledgeBase/v1/findDrugsCategoryList")

    setMedicine(data?.data?.result || [])
  }
  const getRightData = async () => {
    const data = await request.get(`/api/health/share/knowledgeBase/v1/findDrugsKnowledgeList?drugsCategoryId=${medicineId}&page=1&count=20`)
    console.log(data);

    setRightData(data?.data?.result || [])

  }
  useEffect(() => {
    setMedicineId(medicine[0]?.id || undefined)
  }, [medicine])
  useEffect(() => {
    getData()
  }, []);
  useEffect(() => {
    getRightData()
  }, [medicineId])

  return (
    <div className="medicine-container">
      <div className="medicine-left">
        {
          medicine?.length ? medicine.map((item, index) => {
            return <div onClick={() => {
              setMedicineId(item.id)
            }} className="medicine-left-item" style={{ background: `${item.id === medicineId ? "#fff" : ""}` }} key={index}>
              {item.name}
            </div>
          }) : []
        }
      </div>
      <div className="medicine-right">
        {
          rightData?.length ? rightData.map((item, index) => {
            return <div className="medicine-right-items" key={index}
              onClick={() => navigate(`/medicineDetail?id=${item.id}`)}
            >
              <div className="items-img"><Image src={item.picture} width={80} height={50}></Image></div>
              <div className='items-text'>
                {item.name}
              </div>
            </div>
          }) : []
        }
      </div>
    </div>
  );
};

export default Medicine;